<template>
    <div class="threeid">
        {{props.data}}
    </div>
</template>

<script setup>
import '/@/utils/three.js';
import { onMounted,defineProps } from 'vue'
const props = defineProps({
  data:Array
});

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 500 / 500, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
onMounted(() => {
    const threeidom = document.getElementsByClassName('threeid')[0];
    threeidom.appendChild(renderer.domElement);
})
// document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 3;
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();


</script>

<style lang="less" scoped>
.threeid {
    width: 500px;
    height: 500px;
    min-height: 500px;
}
</style>